<template>
	<view class="myWallet">

		<!-- 我的钱包详情 -->
		<view class="myWallet-detail">
			<view class="myWallet-item">
				<view class="myWallet-itemtitle">
					余额（元）
				</view>
				<view class="myWallet-itemprice">
					{{balance}}
				</view>
			</view>
			<view class="myWallet-item">
				<view class="myWallet-itemtitle">
					会员红包（个）
				</view>
				<view class="myWallet-itemprice">
					{{redPacket}}
				</view>
			</view>
			<view class="myWallet-item">
				<view class="myWallet-itemtitle">
					优惠券（张）
				</view>
				<view class="myWallet-itemprice">
					{{discountCoupon}}
				</view>
			</view>

		</view>
		<navigator url="/pages/rechargelrx/rechargelrx">
			<view class="myWallet-recharge">
				充值
			</view>
		</navigator>


		<view class="myWallet-withdraw">
			提现
		</view>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapState
	} = createNamespacedHelpers('users');
	export default {
		data() {
			return {
				balance: "---",
				redPacket: "---",
				discountCoupon: "---"
			}
		},
		onShow() {
			this.balance = this.myWallet.balance;
			this.redPacket = this.myWallet.redPacket;
			this.discountCoupon = this.myWallet.discountCoupon;
		},
		computed: {
			...mapState(["myWallet"]),
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.myWallet {
		.myWallet-detail {
			background-color: #ff8038;
			color: white;
			margin: 30rpx;
			padding: 52rpx 40rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;

			.myWallet-item {
				.myWallet-itemtitle {
					font-size: 24rpx;
				}

				.myWallet-itemprice {
					font-size: 40rpx;
					margin-top: 20rpx;
				}
			}
		}


		.myWallet-recharge {
			background-color: #ff8038;
			color: white;
			margin: 40rpx 30rpx;
			text-align: center;
			padding: 26rpx;
			font-size: 32rpx;
			border-radius: 10rpx;
		}

		.myWallet-withdraw {
			background-color: #ffffff;
			padding: 26rpx;
			margin: 30rpx;
			font-size: 32rpx;
			border-radius: 10rpx;
			text-align: center;
			font-weight: 700;
		}
	}
</style>
